import { ChangeEvent, ChangeEventHandler, Fragment, ReactElement, SetStateAction, useEffect, useRef, useState } from "react";
import lessModule from "./index.module.less"
import { Checkbox, Radio } from "antd";
import { CheckboxChangeEvent } from "antd/es/checkbox";
import { modeType } from "../../../../../../../../common/interface";


// 主页-弹窗组件-选择监测弹窗组件-选择嵌套组件
interface componentInterface {
    isCard: boolean
    monitoringType: string
    mode: modeType
    isOpen: boolean
    level?: number
    sourceList: Array<object>
    selectedList: Array<string>
    selectedOtherList: Array<object>
    change_selectedList: Function
    change_selectedOtherList: Function
}
const HomePage_ModalComponent_SelectMonitorModalComponent_SelectNestedComponent: React.FC<componentInterface> = (props) => {    
    // 将checkBox 和 radio 共用的api封装
    const make_apiData = (data: object) => {
        const selectedValue = data?.["label"]
        delete data["label"]
        const selectedOtherData = data
        return {
            checked: props.selectedList.includes(selectedValue),
            onChange: (event: CheckboxChangeEvent) => {
                props.change_selectedList(props.mode === "multiple" ? event.target.checked ? [...props.selectedList, selectedValue] : props.selectedList.filter((item: string) => item !== selectedValue) : [selectedValue])
                props.change_selectedOtherList(props.mode === "multiple" ? event.target.checked ? [...props.selectedOtherList, selectedOtherData] : props.selectedOtherList.filter((item: object) => item["id"] !== data["id"]) : [selectedOtherData])
            }
        }
    }

    return (
        <div className={lessModule["homePageModalComponentSelectMonitorModalComponentSelectNestedComponent"]}>
            {
                props.sourceList.map((item, idx) => (
                    <Fragment key={`sourceItem${idx}`}>
                        {
                            // 爹：在有资格当爹的前提下，与 “折叠  + 名称是线路 & 下标可以不能被2整除” 的情况相反时显示，即 1:展开 + 名称是主变；2：展开 + 名称是线路 & 下标可以被2整除；3：折叠。（下标整除的原因是，当为线路时，一行2个儿子）
                            // (props.isOpen || item["children"]) && (["线路","站点"].includes(props.monitoringType) || item["children"] || idx % 2 === 0)
                            !(!props.isOpen && !item["children"]) && !(["线路", "站点"].includes(props.monitoringType) && !item["children"] && idx % (props.isCard ? 4 : 2)) && <div className={lessModule["homePageModalComponentSelectMonitorModalComponentSelectNestedComponent-row"]}
                                style={{
                                    paddingTop: props.level || idx ? 2 : 0,
                                    borderTop: props.level || idx ? "1px solid rgba(0, 0, 0, 0.15)" : "none"
                                }}>
                                {
                                    item["children"] && <div className={lessModule["homePageModalComponentSelectMonitorModalComponentSelectNestedComponent-row__group"]} style={{
                                        marginLeft: 43 + (props.level ?? 0) * 22
                                    }}>{item["label"]}</div>
                                }
                                {
                                    // 纯儿子：在没资格当爹的前提下，当名称是主变时，只显示自己；当名称是线路时，还要显示他弟（如果他有比他小一位的弟弟）
                                    !item["children"] && Array.from({ length: ["主变"].includes(props.monitoringType) ? 1 : props.isCard ? 4 : 2 }, (_, i) => idx + i).map((item) => (
                                        <div key={`idxItem${item}`} className={lessModule["homePageModalComponentSelectMonitorModalComponentSelectNestedComponent-row__group"]}
                                            style={{
                                                width: `calc(${["主变"].includes(props.monitoringType) ? "100%" : ["线路"].includes(props.monitoringType) ? "50%" : ["站点"].includes(props.monitoringType) && props.isCard ? "25%" : "50%"} - ${["主变"].includes(props.monitoringType) ? "0px" : "16px"} )`,
                                                marginLeft: ["主变"].includes(props.monitoringType) ? 43 + ((props.level ?? 0) + 1) * 22 : 0,
                                                marginRight: ["主变"].includes(props.monitoringType) ? 0 : 16,
                                                backgroundColor: props.selectedList.includes(props.sourceList[item]?.["label"]) ? "#E6F7FF" : "rgba(0,0,0,0)"
                                            }}>
                                            {
                                                // 判断他是不是老幺 && 是否符合搜索条件
                                                props.sourceList.length > item && <>
                                                    {
                                                        props.mode === "multiple" && <Checkbox {...make_apiData({ ...props.sourceList[item] })}>{props.sourceList[item]?.["label"]}</Checkbox>
                                                    }
                                                    {
                                                        props.mode === "single" && <Radio {...make_apiData({ ...props.sourceList[item] })}>{props.sourceList[item]?.["label"]}</Radio>
                                                    }
                                                </>
                                            }
                                        </div>
                                    )
                                    )
                                }

                            </div>
                        }
                        {
                            item["children"] && <HomePage_ModalComponent_SelectMonitorModalComponent_SelectNestedComponent isCard={props.isCard} monitoringType={props.monitoringType} mode={props.mode} isOpen={props.isOpen} level={props.level ?? 0 + 1} sourceList={item["children"]} selectedList={props.selectedList} selectedOtherList={props.selectedOtherList} change_selectedList={props.change_selectedList} change_selectedOtherList={props.change_selectedOtherList} />
                        }
                    </Fragment>
                )
                )
            }
        </div>
    )
}

// 以上是因为一直纠结是拆分还是不拆分，然后写到一半，懒得拆分了，硬着头皮写下去的，以后以实际需求证明哪种方案对迭代友好，最后引以为鉴。烦死了！！！

export default HomePage_ModalComponent_SelectMonitorModalComponent_SelectNestedComponent